<template>
    <el-table
      :data="data"
      style="width: 100%"
      v-loading="loading"
      stripe
      border
    >
      <el-table-column prop="deviceId" label="设备ID" width="100" align="center"></el-table-column>
      <el-table-column prop="deviceName" label="设备名称" width="150" align="center"></el-table-column>
      <el-table-column prop="description" label="预警描述" min-width="200" show-overflow-tooltip></el-table-column>
      <el-table-column label="预警等级" width="120" align="center">
        <template #default="{row}">
          <el-tag :type="getWarningLevelTagType(row.level)">
            {{ getWarningLevelText(row.level) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="triggeredTime" label="触发时间" width="180" align="center"></el-table-column>
      <el-table-column prop="resolvedTime" label="解决时间" width="180" align="center"></el-table-column>
      <el-table-column prop="solution" label="解决方案" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
      <template #default="{row}">
        <el-button 
          type="info" 
          size="small" 
          @click="showDetail(row)"
        >
          详情
        </el-button>
        <el-button 
          type="warning" 
          size="small" 
          @click="handleEdit(row)"
        >
          修改
        </el-button>
      </template>
    </el-table-column>
    </el-table>
    

  <!-- 详情对话框 -->
  <el-dialog v-model="showDetailDialog" :title="`预警详情 - ${currentDetail.deviceName || ''}`" width="60%">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="设备ID">{{ currentDetail.deviceId }}</el-descriptions-item>
      <el-descriptions-item label="设备名称">{{ currentDetail.deviceName }}</el-descriptions-item>
      <el-descriptions-item label="预警等级">
        <el-tag :type="getWarningLevelTagType(currentDetail.level)">
          {{ getWarningLevelText(currentDetail.level) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="触发时间">{{ currentDetail.triggeredTime }}</el-descriptions-item>
      <el-descriptions-item label="解决时间" v-if="currentDetail.resolvedTime">{{ currentDetail.resolvedTime }}</el-descriptions-item>
      <el-descriptions-item label="解决人" v-if="currentDetail.resolverName">{{ currentDetail.resolverName }}</el-descriptions-item>
      <el-descriptions-item label="预警描述" :span="2">
        <div style="white-space: pre-line;">{{ currentDetail.description }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="解决方案" :span="2" v-if="currentDetail.solution">
        <div style="white-space: pre-line;">{{ currentDetail.solution }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>

  <!-- 编辑对话框 -->
  <el-dialog v-model="showEditDialog" :title="`编辑预警 - ${currentEdit.deviceName || ''}`" width="50%">
    <el-form :model="currentEdit" label-width="100px">
      <el-form-item label="预警等级">
        <el-radio-group v-model="currentEdit.level">
          <el-radio-button :label="1">低</el-radio-button>
          <el-radio-button :label="2">中</el-radio-button>
          <el-radio-button :label="3">高</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="预警描述">
        <el-input 
          v-model="currentEdit.description" 
          type="textarea" 
          :rows="5"
          placeholder="请输入预警描述"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="showEditDialog = false">取消</el-button>
      <el-button type="primary" @click="confirmEdit">保存</el-button>
    </template>
  </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { defineProps } from 'vue'
  import { ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import { updateUserWarning } from '@/api/user'
  const props = defineProps({
    data: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  })
  
  // 预警等级文本
  const getWarningLevelText = (level: number) => {
    const levelMap = {
      1: '低',
      2: '中',
      3: '高'
    }
    return levelMap[level] || '未知'
  }
  
  // 预警等级标签类型
  const getWarningLevelTagType = (level: number) => {
    const typeMap = {
      1: 'success',
      2: 'warning',
      3: 'danger'
    }
    return typeMap[level] || ''
  }
  



const emit = defineEmits(['update'])

const showDetailDialog = ref(false)
const showEditDialog = ref(false)
const currentDetail = ref<any>({})
const currentEdit = ref<any>({})


// 显示详情
const showDetail = (row: any) => {
  currentDetail.value = { ...row }
  showDetailDialog.value = true
}

// 编辑记录
const handleEdit = (row: any) => {
  currentEdit.value = { ...row }
  showEditDialog.value = true
}

// 确认编辑
const confirmEdit = async () => {
  try {
    await updateUserWarning(currentEdit.value)
    ElMessage.success('修改成功')
    showEditDialog.value = false
    emit('update')
  } catch (error) {
    ElMessage.error('修改失败')
  }
}
</script>


<style scoped>
.el-table {
  margin-top: 10px;
}
</style>